<template>
    <div>
        <div><div style="display: inline-block;margin-bottom: 10px;margin-right: 30px"><span>所属集中器：</span><span>{{parentData[0]?parentData[0].dataCollectorName:''}}</span></div><div style="display: inline-block;"><span>所属设备组：</span><span>{{parentData[0]?parentData[0].groupName:''}}</span></div></div>
<!--        <div>-->
<!--            <div style="margin-bottom: 15px;">-->
<!--                <el-button type="primary" @click="addPolicy">新增</el-button>-->
<!--                <el-button type="success">修改</el-button>-->
<!--                <el-button type="danger">删除</el-button>-->
<!--            </div>-->
<!--            <el-table-->
<!--                    :data="tableList"-->
<!--                    border-->
<!--                    style="width: 100%"-->
<!--                    @selection-change="handleSelectionChange">-->
<!--                <el-table-column type="selection" width="55"></el-table-column>-->
<!--                <el-table-column prop="time" align="center" width="200" label="执行时间"></el-table-column>-->
<!--                <el-table-column prop="fun" align="center" width="200"label="执行动作"></el-table-column>-->
<!--                <el-table-column prop="control" align="center" width="100" label="光温控制"></el-table-column>-->
<!--                <el-table-column prop="des" align="center" width="100" label="光温策略描述"></el-table-column>-->
<!--            </el-table>-->
<!--        </div>-->
<!--        <el-collapse v-model="activeNames" @change="handleChange">-->
<!--            <el-collapse-item  v-for="(item,index) in tableData" :title="item.title" :key="index" :name="index" style="border-left: 1px solid #EBEEF5;border-right: 1px solid #EBEEF5;margin-bottom: 10px;">-->
                <div>
                    <el-form :inline="true" style="">
                        <el-form-item label="选择定时器" class="limit-width">
                            <el-select v-model="value4" placeholder="请选择" @change="selectMulti">
                                <el-option
                                        v-for="item in options"
                                        :key="item.id"
                                        :label="item.strategyName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
<!--                        <el-form-item>-->
<!--                            <el-button size="mini">清除</el-button>-->
<!--                        </el-form-item>-->
                    </el-form>
                    <el-table
                            :data="tableList"
                            border  stripe
                            style="width: 100%">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="strategyName" align="center" label="策略名称"></el-table-column>
                        <el-table-column prop="strategyStartTime" :formatter="formatDateAll" align="center" label="执行日期"></el-table-column>
                        <!--                <el-table-column prop="time" align="center" label="执行时间"></el-table-column>-->
                        <!--                <el-table-column prop="fun" align="center" label="执行动作"></el-table-column>-->
                        <!--                <el-table-column prop="control" align="center" label="光温控制"></el-table-column>-->
                        <el-table-column prop="strategyAction" :formatter="formatDes" align="center" label="策略描述"></el-table-column>
                    </el-table>
                </div>
<!--            </el-collapse-item>-->
<!--        </el-collapse>-->

<!--        <el-dialog title="策略编辑" :visible.sync="dialogIsShow" width="50%" :modal="innerMark" v-dialogDrag>-->
<!--            <div style="">-->
<!--                <el-form ref="form" :model="form" label-width="80px">-->
<!--                    <el-form-item label="有效日期">-->
<!--                        <el-date-picker-->
<!--                                v-model="value1"-->
<!--                                type="date"-->
<!--                                placeholder="选择开始日期">-->
<!--                        </el-date-picker>-->
<!--                        <span>&#45;&#45;</span>-->
<!--                        <el-date-picker-->
<!--                                v-model="value2"-->
<!--                                type="date"-->
<!--                                placeholder="选择结束日期">-->
<!--                        </el-date-picker>-->

<!--                    </el-form-item>-->
<!--                    <el-form-item label="循环方式">-->
<!--                        <el-radio-group v-model="form.resource" @change="radioChange">-->
<!--                            <el-radio v-for="item in radioGroup" :label="item" :key="item"></el-radio>-->
<!--                        </el-radio-group>-->
<!--                        <el-checkbox-group v-model="form.type" v-if="form.resource == radioGroup[1]">-->
<!--                            <el-checkbox v-for="item in checkWeek" :label="item" :key="item" name="type"></el-checkbox>-->
<!--                        </el-checkbox-group>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="控制开关">-->
<!--                        <div v-for="(item ,index) in controlList" style="margin-bottom: 10px;">-->
<!--                            <el-time-picker-->
<!--                                    v-model="item.time"-->
<!--                                    :picker-options="{-->
<!--                                  selectableRange: '18:30:00 - 20:30:00'-->
<!--                                }"-->
<!--                                    placeholder="请选择时间">-->
<!--                            </el-time-picker>-->
<!--                            <span>-</span>-->
<!--                            <el-select v-model="item.control" placeholder="请选择动作">-->
<!--                                <el-option label="开" value="shanghai"></el-option>-->
<!--                                <el-option label="关" value="beijing"></el-option>-->
<!--                            </el-select>-->
<!--                            <el-button v-if="index<1" type="primary" icon="el-icon-plus" circle style="margin-left: 20px;" @click="addContrl"></el-button>-->
<!--                        </div>-->

<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--            </div>-->

<!--            <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogIsShow = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="saveEdit">确 定</el-button>-->
<!--            </span>-->
<!--        </el-dialog>-->
    </div>
</template>

<script>
    import {getCategory,getTimerStrategy} from '../../../api/index';
    export default {
        name: "customPolicy",
        props:['parentData','statData'],
        data(){
            return {
                activeNames: ['0'],
                typeName:'',
                dialogIsShow:false,
                innerMark:false,
                tableList:[],
                options: [],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                value1:'',
                value2:'',
                value4:[],
                value3:new Date(2016, 9, 10, 18, 40),
                controlList:[{time:'',control:''}],
                radioGroup:['每天','星期','指定日期'],
                checkWeek:['星期一','星期二','星期三','星期四','星期五','星期六','星期天'],
                multipleSelection:[],
                actionList:[],
            }
        },
        created(){
            this.getDataList();
            this.getAction();
            // console.log(this)
            // console.log(this.statData)
            this.tableList = this.statData;
            this.value4 = this.statData[0].id;
        },
        watch:{
            statData:function (val) {
                this.tableList = this.statData;
                this.value4 = this.statData[0].id;
            }
        },
        methods: {
            //获取策略列表
            getDataList(){
                getTimerStrategy({}).then((res)=>{
                    console.log(res);
                    this.options = res.datas;
                })
            },
            //获取设备动作列表
            getAction(){
                getCategory({
                    "dicName":"设备动作"
                }).then((res) =>{
                    console.log(res)
                    this.actionList = res.expandData
                })
            },
            handleChange(val) {
                console.log(val);
            },
            addPolicy(){
                this.dialogIsShow = true;
            },
            addContrl(){
                this.controlList.push({time:'',control:''})
            },
            radioChange(val){
                console.log(val);
            },
            saveEdit(){
                var obj = {
                    st:this.value1,
                    ed:this.value2,
                    ing:this.form.resource,
                    week:this.form.type,
                    controlList:this.controlList
                }
                console.log(obj)
            },
            handleSelectionChange(val){
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            selectMulti(val){
                this.tableList = [];
                for(var i=0;i<this.options.length;i++){
                    if(val == this.options[i].id){
                        this.tableList.push(this.options[i]);
                    }
                }
                console.log(this.tableList)
                // this.$forceUpdate();
            },
            //格式化返回的有效时间
            formatDateAll(row,cellVal){
                return row.strategyStartTime + '-' + row.strategyEndTime;
            },
            //格式化策略描述信息
            formatDes(row, column, cellValue){
                var str = ''
                if(!row.strategyAction||row.strategyAction.length<=0){
                    return ;
                }
                for(var i=0;i<row.strategyAction.length;i++){
                    if(row.strategyAction[i].jobType == 1){
                        str += this.checkWeek[row.strategyAction[i].weekDay - 1] + ' '+row.strategyAction[i].jobTime +' '+ this.arrFind(row.strategyAction[i].jobAction) + '；'  ;
                    }else if(row.strategyAction[i].jobType == 2){
                        str +=  row.strategyAction[i].jobDate + ' '+ row.strategyAction[i].jobTime +' '+ this.arrFind(row.strategyAction[i].jobAction) + '；'   ;
                    }else{
                        str += '每天' + ' '+ row.strategyAction[i].jobTime +' '+ this.arrFind(row.strategyAction[i].jobAction) + '；'   ;
                    }
                }
                return str;
            },
            //数组查找
            arrFind(val){
                var curr =  this.actionList.find((currentValue)=>{
                    return  currentValue.value == val;
                })
                return curr?curr.name:''
            },
        }
    }
</script>

<style scoped>
    /deep/ .el-collapse-item__header{
        background-color: #eee;
        height: 30px;
        line-height: 30px;
        padding-left: 15px;
    }
    /deep/ .el-collapse-item__wrap{
        padding: 5px;
    }
    /deep/ .el-collapse-item__content{
        padding-bottom: 0;
    }
</style>
